<template>
  <h1>style 绑定</h1>

  <p :style="{ color: color, fontSize: fontSize }">演示 style 绑定</p>

  <p :style="obj">同 class 绑定，可以直接将对象丢进去</p>

  <p>同 class 绑定，也可以绑定数组和嵌套等等，但不建议使用，因为对于样式来说，简单的绑定一个对象基本已经足够</p>
</template>

<script>
export default {
  data() {
    return {
      color: 'blue',
      fontSize: '30px',
      obj: {
        color: 'red',
        fontSize: '50px'
      },
    }
  }
}
</script>

<style>
.hello {
  color: blue;
}

.text-danger {
  color: red;
}

.big {
  font-size: 30px;
}
</style>